<template>
  <div id="app">
    <div class="layout">
      <Layout class="sub-layout">
        <div class="sider-menus">
          <div class="sider-top-logo">
            Admin
          </div>
          <Sider ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed" class="sider">
            <Menu :active-name="study" ref="study" theme="dark" width="auto" :class="menuitemClasses" class="menu">
              <MenuItem name="welcome" to="/welcome" class="li">
                <Icon type="ios-navigate"></Icon>
                <span>控制台</span>
              </MenuItem>
              <MenuItem name="category" to="/category">
                <Icon type="ios-keypad"></Icon>
                <span>课程类目</span>
              </MenuItem>
              <MenuItem name="course" to="/course">
                <Icon type="ios-videocam"></Icon>
                <span>视频管理</span>
              </MenuItem>
                <MenuItem name="note" to="/note">
                    <Icon type="ios-folder"></Icon>
                    <span>课堂笔记</span>
                </MenuItem>
              <MenuItem name="paper" to="/paper">
                <Icon type="ios-paper"></Icon>
                <span>试卷管理</span>
              </MenuItem>
              <MenuItem name="subject" to="/subject">
                <Icon type="md-options"></Icon>
                <span>题目管理</span>
              </MenuItem>
              <MenuItem name="question" to="/question">
                <Icon type="ios-settings"></Icon>
                <span>技能广场</span>
              </MenuItem>
              <MenuItem name="records" to="/records">
                <Icon type="ios-settings"></Icon>
                <span>藏经大楼</span>
              </MenuItem>
              <MenuItem name="user" to="/user">
                <Icon type="ios-contact"></Icon>
                <span>用户管理</span>
              </MenuItem>
            </Menu>
          </Sider>
        </div>
        <Layout>
          <Header :style="{padding: 0}" class="layout-header-bar">
            <div class="trigger-box">
              <Icon @click.native="collapsedSider" :class="rotateIcon" class="icon-change" :style="{margin: '0 20px'}"
                    type="md-menu" size="24"></Icon>
            </div>
          </Header>
          <Content :style="{margin: '20px', background: '#fff', minHeight: '260px'}">
            <router-view></router-view>
          </Content>
        </Layout>
      </Layout>
    </div>
  </div>
</template>

<script>
import { globalUrl } from '../api/doMain'

export default {
  name: 'Index',
  created () {
  },
  data () {
    return {
      study: 'welcome',
      isCollapsed: false
    }
  },
  computed: {
    rotateIcon () {
      return [
        'menu-icon',
        this.isCollapsed ? 'rotate-icon' : ''
      ]
    },
    menuitemClasses () {
      return [
        'menu-item',
        this.isCollapsed ? 'collapsed-menu' : ''
      ]
    }
  },
  methods: {
    collapsedSider () {
      this.$refs.side1.toggleCollapse()
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.study = this.$route.path.slice(1)
      this.$refs.study.updateActiveName()
    })
  }
}
</script>

<style>
@import "../assets/base.css";
/*html, body, #app, .layout, .sub-layout, .sider {
  height: 100%;
}

.layout {
  border: none !important;
  border-radius: 0 !important;
  background: #f5f7f9;
  position: relative;
  overflow: hidden;
}

.layout-header-bar {
  background: #fff !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}

.sider-menus {
  background: #19212c;
}

.sider {
  background: #19212c !important;
}

.sider .menu {
  background: #19212c;
}

.sider .menu .li:hover {
  background: #19212c !important;
}

.sider-menus .sider-top-logo {
  height: 64px;
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  line-height: 64px;
}

!*选中的菜单*!
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
  background: #2d8cf0 !important;
  color: #fff !important;
}

!*悬停的菜单*!
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-item:hover, .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title:hover {
  color: #fff;
  background: #2d8cf0 !important;
}

.menu-item span {
  display: inline-block;
  overflow: hidden;
  width: 69px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width .2s ease .2s;
}

.menu-item i {
  transform: translateX(0px);
  transition: font-size .2s ease, transform .2s ease;
  vertical-align: middle;
  font-size: 16px;
}

.collapsed-menu span {
  width: 0px;
  transition: width .2s ease;
}

.collapsed-menu i {
  transform: translateX(5px);
  transition: font-size .2s ease .2s, transform .2s ease .2s;
  vertical-align: middle;
  font-size: 22px;
}

.trigger-box {
  position: absolute;
}

.trigger-box:hover {
  background: #f7f7f7;
  box-shadow: 0px 0px 1px 0px #dce0e7;
}

.trigger-box .icon-change {
  cursor: pointer;
}*/
</style>
